<!-- 仅为实例 -->
<template>
	<scroll-view
		class="task-list"
		scroll-y="true"
		enable-flex
		@scrolltolower="onscrolltolower">
		<view class="filter-box" @click="handlerClickFilter">
			<text>{{ taskTypeName }}</text>
			<image src="/static/filter.png" mode=""></image>
		</view>
		<!-- <uni-transition
			custom-class="transition task-type-selection"
			:mode-class="['fade', 'zoom-out']"
			:show="visible">
			<view
				v-for="(item,index) in taskTypeData"
				:key="index"
				:class="['type-item', item.code === taskType && 'is-active']"
				@click="handlerChangeFilter(item.code)">{{ item.label }}
			</view>
		</uni-transition> -->
		<view
			class="list-box"
			v-if="taskList.length">
			<view
				class="list-item"
				v-for="(item, index) in taskList"
				:key="index"
				@click="handlerClick(item)">
				<image class="image-cover" :src="item.thumbnail" alt="" srcset="" mode="aspectFill">
				<view class="title-box">
					<view class="title cut_font">{{ item.name || '-' }}</view>
					<view class="description cut_font">{{ item.description || '-' }}</view>
				</view>
			</view>
			<view class="loading-text">
				{{ loadingObject[loadStaus].text }}
			</view>
		</view>
		<view v-else class="empty-box">
			<image src="../../static/no_data.png" mode=""></image>
			<text class="text">暂无书写任务</text>
		</view>
	</scroll-view>
</template>

<script>

export default {
	name: 'mirroregoTaskList',
	data () {
		return {
			taskList: [],
			taskTypeData: [
				{
					label: "全部任务",
					code: 1,
				},
				{
					label: "今日任务",
					code: 2,
				},
				{
					label: "一周内任务",
					code: 3,
				},
				{
					label: "一个月任务",
					code: 4,
				},
			],
			taskType: 1,
			visible: false,
			pageNo: 1,
			pageSize: 10,
			// 加载中: loading  已完成: finished 没有更多了: nomore
			loadStaus: 'loading',
			loadingObject: {
				loading: { text: '正在加载中...' },
				finished: { text: '上拉加载更多' },
				nomore: { text: '没有更多啦' },
			},
		};
	},
	computed: {
		taskTypeName() {
			return (this.taskTypeData.find(({ code }) => code === this.taskType)  || {}).label || '';
		},
	},
	methods: {
		getTaskList() {
			// let userInfo = uni.getStorageSync('userInfo') || '{}';
			// userInfo = JSON.parse(userInfo); 
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			this.loadStaus = 'loading';
			uni.$request({
				method: 'GET',
				url: 'app-api/homework/publish/page',
				data: {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					taskType: this.taskType,
				},
				header: { 'tenant-id': 1 },
			}).then((res) => {
				this.taskList = res?.data?.list || [];
				this.loadStaus = res?.data?.total > this.pageSize ? 'finished' : 'nomore';
			}).catch(() => {
				this.loadStaus = 'finished';
			}).finally(uni.hideLoading);
		},
		handlerClickFilter() {
			this.visible = true;
			uni.showActionSheet({
				itemList: this.taskTypeData.map(({ label }) => label),
				success: ({ tapIndex }) => {
					this.handlerChangeFilter(this.taskTypeData[tapIndex].code);
				},
				fail: () => {},
			});
		},
		handlerChangeFilter(code) {
			this.visible = false;
			this.taskType = code;
			this.pageSize = 10;
			this.getTaskList();
		},
		handlerClick(data) {
			uni.navigateTo({
				url: `/pages/write/writing?homeworkId=${data.id}&showDetail=true`,
			});
		},
		onscrolltolower() {
			if (this.loadStaus === 'finished') {
				this.pageSize += 10;
				this.getTaskList();
			}
		},
	},
	mounted() {
		this.getTaskList();
	},
};
</script>

<style lang="scss">
.task-list {
	height: 100%;
	position: relative;
	font-family: PingFang SC;
	overflow-y: auto;
	.filter-box {
		font-size: 28rpx;
		font-weight: 400;
		color: #FE8151;
		line-height: 36rpx;
		display: flex;
		margin-bottom: 14rpx;
		text {
			margin-right: 10rpx;
		}
		image {
			width: 32rpx;
			height: 32rpx;
			margin: auto 0;
		}
	}
	.task-type-selection {
		position: absolute;
		top: 48rpx;
		left: 0;
		z-index: 2;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
		.type-item {
			border-bottom: 1rpx solid #e6e6e6;
			padding: 20rpx 0;
			color: #333;
			font-size: 26rpx;
			&.is-active {
				color: #FE8151;
				border-color: #FE8151;
			}
			&:nth-last-child(1) {
				border-bottom: 0;
			}
		}
	}
	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 50rpx;
		.list-item {
			box-sizing: border-box;
			width: calc(50% - 10rpx);
			margin: 24rpx 0;
			.image-cover {
				width: 336rpx;
				height: 190rpx;
				background: #fff;
				border-radius: 10rpx;
			}
			.title-box {
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				.title {
					margin: 20rpx 0 12rpx 0;
					font-size: 32rpx;
					color: #333333;
				}
				.description {
					font-size: 24rpx;
					color: #B3B3B3;
				}
			}
		}
		.loading-text {
			color: #999;
			font-size: 12rpx;
			text-align: center;
			margin: 10px 0;
			width: 100%;
		}
	}
	.empty-box {
		display: flex;
		flex-direction: column;
		image {
			width: 170rpx;
			height: 167rpx;
			margin: 270rpx auto 0 auto;
		}
		.text {
			font-size: 30rpx;
			font-weight: 300;
			color: #666666;
			margin: 50rpx auto;
		}
	}
}
</style>
